//百度的上传插件对象
var uploaderBaiDu = "";

jQuery(function() {
    var $ = jQuery;
    $list = $('#fileList');

    //上传数据到服务器的地址
    var baseUploader = "/user/addImg.php";

    //初始化Web Uploader
    var uploader = WebUploader.create({

        auto: false, // 选完文件后，是否自动上传
        // swf文件路径
        swf: '/plugin/webUploader/Uploader.swf',

        //上传文件的参数
        // formData: {
        //     "userId":$("#userId"),
        //     "imgName":$("#imgName"),
        //     "description":$("#description"),
        //     "remark":$("#remark")
        // },

        // 文件接收服务端。
        server: baseUploader,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        // pick: '#picker',

        // 选择文件的按钮。可选。
        pick: {id:'#filePicker',  //选择文件的按钮
            multiple:true},   //允许可以同时选择多个图片

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,

        threads:'5',        //同时运行5个线程传输

        // 只允许选择图片文件。
        accept: {
            title: 'Images', //描述
            extensions: 'jpg,jpeg,png,gif', //类型
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif' //mime类型
        },

        thumb: {
            type: 'image/jpg,jpeg,png'
        },
        fileNumLimit: 8, //限制上传个数
        fileSingleSizeLimit: 5048000 //限制单个上传图片的大小，限制上传单张图片文件大小，单位是B，1M=1024000B。


    });

    uploaderBaiDu = uploader;


    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>图片不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 100, 100 );
    });


    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });


    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).addClass('upload-state-done');
        //刷新
        alert("上传成功");
        window.location.reload();
        clearForm('imgForm');
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });

    //默认如果啥也不处理，只要有返回数据就认为是成功，就算返回的是错误信息，也认为是成功了
    //但是，在认为成功前会派送一个事件uploadAccept，这个事件是用来询问是否上传成功的。在这个事件中你可以拿到上传的是哪个文件，以及对应的服务端返回reponse
    uploader.on("uploadAccept", function( file, data){
        if (data.status == 'error'){
            alert(data.msg);
            // 通过return false来告诉组件，此文件上传有错。
            return false;
        }
    });

    //当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
    uploader.on('uploadBeforeSend', function (obj, data, headers) {
        //添加数据
        data.userId = $("#userId").val();
        data.imgName = $("#imgName").val();
        data.description = $("#description").val();
        data.remark = $("#remark").val();
    });


});


/**
 * 检查用户是否填写参数完整
 * false 数据检查异常
 * true 数据无异常
 */
function checkUserImg() {
    var userId = $("#userId").val();
    if (checkNull(userId)){
        alert("找不到用户");
        return false;
    }
    return true;
}

/**
 * 添加用户图片
 */
function addImg() {
    if (!checkUserImg()){
        return;
    }

    //执行手动提交,触发百度提交用户
    uploaderBaiDu.upload();
}



/*---------------------------------------------------------
-------------------下面是瀑布流相关--------------------------------------
---------------------------------------------------------
---------------------------------------------------------*/




    /**
     * 封装的ajax请求
     * @param {Object} method get和post方式
     * @param {Object} url 文件路径
     * @param {Object} data 页码
     * @param {Object} success 成功的函数
     */
    function ajax(method, url, data, success) {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        if (method == 'get' && data) {
            url += '?' + data;
        }

        xhr.open(method,url,true);
        if (method == 'get') {
            xhr.send();
        } else {
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

        xhr.onreadystatechange = function() {

            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    success && success(xhr.responseText);
                    //console.log(xhr.responseText);
                } else {
                    alert('出错了,Err：' + xhr.status);
                }
            }

        }
    }



window.onload = function() {
    //获取界面节点
    var ul = document.getElementById('ul1');
    var li = document.getElementsByTagName('li');
    var liLen = li.length;
    var page = 1;
    var bool = false;
    //调用接口获取数据
    loadPage();//首次加载
    /**
     * 加载页面的函数
     */
    function loadPage(){
        var userId = $("#userId").val();
        var urlParm = "page=" + page + "&limit=10&userId=" + userId;
        ajax('get', '/user/getUserImgList.php', urlParm, function(data) {
            //将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式
            var data = JSON.parse(data);

            if (data.status == "success"){
                var obj = data.object;
                if (obj.list == null || obj.list.length == 0){
                    /*var index = getShort(li);//查找最短的li
                    var div = document.createElement('div');
                    var img = document.createElement('img');
                    img.src = "#";//img获取图片地址
                    img.alt = "没有更多了..."
                    div.appendChild(img);
                    li[index].appendChild(div);*/
                    return;

                } else {
                    for (var i = 0; i < obj.list.length; i ++){
                        var userImg = obj.list[i];

                        var url = "/user/getUserImg?id=" + userImg.urlAddr;

                        var index = getShort(li);//查找最短的li
                        //创建新的节点：div>img+p
                        var div = document.createElement('div');
                        var img = document.createElement('img');
                        img.src = url;//img获取图片地址
                        img.alt = "正在努力加载...";
                        //根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断
                        //img.style.height = data[i].height * (230 / data[i].width) + "px";
                        div.appendChild(img);
                        img.id = userImg.id;
                        //添加事件
                        img.onclick = function(){
                            showUserImg(this.id)
                        };
                        var p = document.createElement('p');
                        //p.innerHTML = data[i].title;//p获取图片标题
                        div.appendChild(p);
                        //加入到最短的li中
                        li[index].appendChild(div);
                    }

                }

            } else if (data.status == 'error'){
                alert(data.msg);
            } else {
                alert("未知情况");
            }

            bool = true;//加载完成设置开关，用于后面判断是否加载下一页

        });
    }

    window.onscroll = function (){
        var index = getShort(li);
        var minLi = li[index];
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){
            //开关为开，即上一页加载完成，才能开始加载
            if(bool){
                bool = false;
                page++;
                loadPage();
            }
        }

    }

};

/**
 * 获取数组中高度最小的索引
 * @param {Object} li 数组
 */
function getShort(li) {

    var index = 0;
    var liHeight = li[index].offsetHeight;
    for(var i = 0; i < li.length; i++) {
        if(li[i].offsetHeight < liHeight) {
            index = i;
            liHeight = li[i].offsetHeight;
        }
    }

    return index;
}

/**
 * 展示信息数据
 * @param userId 用户id
 * @param id 图片的id
 */
function showUserImg(id) {
    //加载层
    var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
    var url = "/user/detailedUserImg.php";
    $.ajax({
        url: url,
        type:"post",
        dataType:"json",
        data:{"id" : id},
        success:function(data){
            if (data.status == "success"){
                var obj = data.object;
                replaceAppoint("imgNameDetail", nullHandle(obj.imgName));
                replaceAppoint("descriptionDetail", nullHandle(obj.description));
                replaceAppoint("remarkDetail", nullHandle(obj.remark));
                $("#idDetail").val(obj.id);
                console.log(obj.id + "<<<")

            } else if (data.status == 'error'){
                alert(data.msg);
            } else {
                alert("未知情况");
            }
            //关闭弹出层
            layer.close(index);
        },
        error:function(e){
            //关闭弹出层
            layer.close(index);
            alert("错误！！" + e);
        }

    });
}

/**
 * 删除图片
 */
function delUserImg() {
    var idDetail = $("#idDetail").val();
    if (checkNull(idDetail)){
        alert("请选择图片");
        return;
    }

    //加载层
    var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
    var url = "/user/delUserImg.php";
    $.ajax({
        url: url,
        type:"get",
        dataType:"json",
        data:{"id" : idDetail},
        success:function(data){
            if (data.status == "success"){
                alert(data.msg);
                //重新刷新页面
                window.location.reload();

            } else if (data.status == 'error'){
                alert(data.msg);
            } else {
                alert("未知情况");
            }
            //关闭弹出层
            layer.close(index);
        },
        error:function(e){
            //关闭弹出层
            layer.close(index);
            alert("错误！！" + e);
        }

    });
}